<template>
	<view v-if="questions != null">
		<view @click="isShow = true" class="topbox">{{number + 1}}/{{questions.length}}</view>
		<view class="contentbox">
			<view class="title">
				<span style="font-weight: normal;">({{ optype(questions[number].type) }})</span>
				{{questions[number].title}}
			</view>
			<!-- 答题 -->
			<view v-if="isSubmit[number] != true">
				<view v-if="questions[number].type=='tian'">
					<input type="text" v-model="content" @input="changeInput"/>
					<hr>
				</view>
				<dan :arr="questions[number].options" :current="answers[number]" @fnc="radioChange" v-if="questions[number].type=='dan' || questions[number].type=='pan'"></dan>
				<duo :arr="questions[number].options" :record="record" @fnc="chooseboxChange" v-if="questions[number].type=='duo'"></duo>
				<button type="primary" @click="submit" style="margin-top: 2vh;">答题</button>
			</view>
			<!-- 解析 -->
			<view v-if="isSubmit[number] == true">
				<!-- 单选、判断 -->
				<view v-if="questions[number].type=='dan' || questions[number].type=='pan'" v-for="(item, index) in questions[number].options" :key="item.code">
					<view :class="{falseCss: item.code==answers[number] && answers[number] != questions[number].answer, trueCss: item.code==questions[number].answer, option: true}">{{item.code}}. {{item.option}}</view>
				</view>
				<!-- 多选 -->
				<view v-if="questions[number].type=='duo'" v-for="(item, index) in questions[number].options" :key="item.code">
					<view :class="{falseCss: record[index]==2, trueCss: record[index]==1, noneCss: record[index]==0, option: true}">{{item.code}}. {{item.option}}</view>
				</view>
			</view>
		</view>
		<view class="answerbox" :class="{spcss: questions[number].type != 'tian'}" v-if="isSubmit[number] == true">
			<view class="trueanswer" >正确答案：<text>{{questions[number].answer}}</text></view>
			<view class="myanswer" v-show="answers[number] != questions[number].answer">我的答案：<text>{{answers[number]}}</text></view>
		</view>
		<view class="analysisbox" v-if="isSubmit[number] == true">
			<view>解析</view>
			<text>{{questions[number].analysis}}</text>
		</view>
		<view class="dolist">
			<view @click="collectOption">{{isCancel[number] == true ? '未收藏': '已收藏'}}</view>|
			<view @click="navToComment">评论</view>
		</view>
		<view class="btnbox">
			<button @click="calc(-1, questions[number-1].type)" v-if="number!=0">上一题</button>
			<button @click="calc(1, questions[number+1].type)" v-if="number!=questions.length-1">下一题</button>
		</view>
		<view class="cover" v-if="isShow" @click="isShow = false">
			<scroll-view scroll-y class="popbox">
				<text v-for="(item, index) in questions" :key="item.code" :class="{numberBtn: true, numberBtnBColor: isSubmit[number] == true}" @click="numberCalc(index)">{{index+1}}</text>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import dan from "../../components/dan.vue"
	import duo from "../../components/duo.vue"
	
	import { getcollectquestions, getquestions, getcollectlist, delcollectquestions } from '../../apis/questionAPI.js'
	
	export default {
		components: {
			dan,
			duo
		},
		data() {
			return {
				isShow: false,
				record: [], // 本道多选题记录
				content: '', // 填空题记录
				answers: [''], // 本次答案
				number: 0, // 题号
				questions: null, // 问题
				type: '', // 类型
				subject: '', // 科目
				isSubmit: [], // 记录是否提交答案
				isCancel: [] ,// 记录是否取消收藏
				colletItem: [],
				foldername: ''
			}
		},
		computed:{
			optype() {
				return (type) => {
					switch (type) {
						case 'tian': return '填空'
						case 'duo': return '多选'
						case 'pan': return '判断'
						case 'dan': return '单选'
					}
				}
			}
		},
		onLoad(option) {
			// {
			// 	name: '收藏夹',
			// 	questionIds: [0, 3, 1]
			// }
			this.foldername = option.foldername
			let that = this
			// 获取题目
			if (this.$store.state.collectlist != null) {
				let item = {}
				for (let i=0; i<this.$store.state.collectlist.length; i++) {
					if (this.$store.state.collectlist[i].foldername == option.foldername) {
						item = this.$store.state.collectlist[i]
						break
					}
				}
				this.colletItem = item
				// console.log(item)
				getquestions({
					questionIds: item.questionIds
				}).then(res => {
					that.questions = res.questions
					// 新开第一道是多选题做特殊处理
					if (res.questions[0].type == 'duo') {
						let arr = []
						for(let i=0; i<res.questions[0].options.length; i++) {
							arr.push(false)
						}
						that.record = arr
					}
				})
			} else {
				getcollectlist({
					username: uni.getStorageSync('token')
				}).then(res => {
					that.$store.dispatch('setcollectlist', res.collectlist)
					for (let i=0; i<res.collectlist.length; i++) {
						if (res.collectlist[i].foldername == option.foldername) {
							that.colletItem = res.collectlist[i]
							break
						}
					}
				})
				// console.log(option.foldername)
				getcollectquestions({
					username: uni.getStorageSync('token'),
					foldername: option.foldername
				}).then(res => {
					// console.log(res.questions)
					that.questions = res.questions
					// 新开第一道是多选题做特殊处理
					if (res.questions[0].type == 'duo') {
						let arr = []
						for(let i=0; i<res.questions[0].options.length; i++) {
							arr.push(false)
						}
						that.record = arr
					}
				})
			}
		},
		onUnload() {
			// console.log(this.colletItem.questionIds)
			let flag = false
			let cancalIds = []
			for (let i=0; i<this.isCancel.length; i++) {
				if (this.isCancel[i]) {
					flag = true
					cancalIds.push(this.colletItem.questionIds[i])
					this.colletItem.questionIds.splice(i, 1)
					this.isCancel.splice(i, 1)
					i--
				}
			}
			let that = this
			// console.log(this.colletItem.questionIds)
			if (flag) {
				delcollectquestions({
					username: uni.getStorageSync('token'),
					foldername: this.foldername,
					cancalIds
				})
				that.$store.dispatch('setcollectitem', that.colletItem)
			}
		},
		methods: {
			// 修改单项选择答案
			radioChange(code) {
				this.answers.splice(this.number, 1, code)
				// console.log(this.answers)
			},
			// 修改多项选择答案
			chooseboxChange(index) {
				// console.log(this.record)
				this.record.splice(index, 1, !this.record[index]) 
				let str = ''
				for (let j=0; j<this.record.length; j++) {
					if (this.record[j]) {
						str = str + this.questions[this.number].options[j].code
					}
				}
				this.answers.splice(this.number, 1, str)
				// console.log(this.answers)
			},
			// 修改填空答案
			changeInput(e) {
				// this.content = e.detail.value
				this.answers[this.number] = e.target.value
				// console.log(this.answers)
			},
			// 改变题目
			calc(n, type) {
				// console.log(this.number, n, type)
				if (type == 'dan' || type == 'pan') {
					this.danCalc(n)
				} else if (type == 'duo') {
					this.duoCalc(n)
				} else {
					this.tianCalc(n)
				}
			},
			// 下一题是单选/判断的处理
			danCalc(n) {
				if (n==1 && this.number+1 == this.answers.length) {
					this.answers.push('')
				}
				this.number = this.number + n
			},
			// 下一题是多选的处理
			duoCalc(n) {
				this.number = this.number + n
				let arr = []
				if (this.isSubmit[this.number]) {
					let option = ''
					for (let j=0; j<this.questions[this.number].options.length; j++) {
						option = this.questions[this.number].options[j].code
						if (this.answers[this.number].indexOf(option) === -1 && this.questions[this.number].answer.indexOf(option) !== -1) {
							// 未选
							arr.push(0)
						} else if (this.answers[this.number].indexOf(option) !== -1 && this.questions[this.number].answer.indexOf(option) !== -1) {
							// 选对
							arr.push(1)
						} else if (this.answers[this.number].indexOf(option) !== -1 && this.questions[this.number].answer.indexOf(option) === -1) {
							// 错选
							arr.push(2)
						}
					}
				} else {
					if (this.questions[this.number].type == 'duo' && this.answers.length == this.number) {
						for(let i=0; i<this.questions[this.number].options.length; i++) {
							arr.push(false)
						}
						this.answers.push('')
					} else {
						for (let j=0; j<this.questions[this.number].options.length; j++) {
							if (this.answers[this.number].indexOf(this.questions[this.number].options[j].code) !== -1) {
								arr.push(true)
							} else {
								arr.push(false)
							}
						}
					}
				}
				// console.log(arr)
				this.record = arr
			},
			// 下一题是填空的处理
			tianCalc(n) {
				this.number = this.number + n
				if (n==1 && this.answers.length == this.number) {
					this.answers.push('')
					this.content = ''
				} else {
					this.content = this.answers[this.number]
				}
			},
			// 提交答案
			submit() {
				// console.log("111")
				if (this.isSubmit.length >= this.number) {
					this.isSubmit.splice(this.number, 1, true)
				} else {
					for(let i=this.isSubmit.length; i<this.number; i++) {
						this.isSubmit.splice(i, 1, false)
					}
					this.isSubmit.splice(this.number, 1, true)
				}
				
				if (this.questions[this.number].type == 'duo') {
					let arr = []
					let option = ''
					for (let j=0; j<this.questions[this.number].options.length; j++) {
						option = this.questions[this.number].options[j].code
						if (this.answers[this.number].indexOf(option) === -1 && this.questions[this.number].answer.indexOf(option) !== -1) {
							// 未选
							arr.push(0)
						} else if (this.answers[this.number].indexOf(option) !== -1 && this.questions[this.number].answer.indexOf(option) !== -1) {
							// 选对
							arr.push(1)
						} else if (this.answers[this.number].indexOf(option) !== -1 && this.questions[this.number].answer.indexOf(option) === -1) {
							// 错选
							arr.push(2)
						}
					}
					this.record = arr
				}
			},
			// 从题目需要列表中改变题目的处理
			numberCalc(index) {
				let length = index - this.number
				// 判断选择的题是否有答案
				if (length > 0 && index >= this.answers.length) {
					for (let i=this.number+1; i<=index; i++) {
						this.answers.push('')
					}
					if (this.questions[index].type == 'duo') {
						let arr = []
						for(let j=0; j<this.questions[index].options.length; j++) {
							arr.push(false)
						}
						this.record = arr
					} else if (this.questions[index].type == 'tian') {
						this.content = ''
					}
				} else {
					// 有答案恢复记录
					if (this.questions[index].type == 'duo') {
						let arr = []
						for (let j=0; j<this.questions[index].options.length; j++) {
							if (this.answers[index].indexOf(this.questions[index].options[j].code) !== -1) {
								arr.push(true)
							} else {
								arr.push(false)
							}
						}
						this.record = arr
					} else if (this.questions[index].type == 'tian') {
						this.content = this.answers[index]
					}
				}
				this.number = index
				console.log(this.answers)
			},
			// 收藏操作
			collectOption() {
				if (this.isCancel.length >= this.number) {
					this.isCancel.splice(this.number, 1, !this.isCancel[this.number])
				} else {
					for(let i=this.isCancel.length; i<this.number; i++) {
						this.isCancel.splice(i, 1, false)
					}
					this.isCancel.splice(this.number, 1, true)
				}
			},
			// 跳转评论页面
			navToComment() {
				uni.navigateTo({
					url: `/pages/comment/comment?questionId=${this.questions[this.number].id}`
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.numberBtn {
		display: inline-block;
		border: 1px solid #000;
		border-radius: 50%;
		line-height: 8vw;
		width: 8vw;
		height: 8vw;
		margin: 1vw;
		text-align: center;
	}
	.numberBtnBColor {
		background-color: rgba(0,0,255,.5);
	}
	.cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: aquamarine;
	}
	.trueCss {
		background-color: rgba(0, 128, 0, .3);
	}
	.falseCss {
		background-color: rgba(128, 0, 0, .3);
	}
	.noneCss {
		background-color: rgba(255, 255, 0, .3);
	}
	.topbox {
		width: 94vw;
		background-color: #f8f8f8;
		height: 5vh;
		text-align: center;
		line-height: 5vh;
		margin: 2vh auto;
		font-size: 2.8vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
	}
	.contentbox {
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 1vh 3vw;
		margin: 2vh auto;
		font-size: 2.8vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		.title {
			margin-bottom: 2vh;
			font-weight: bold;
		}
		
		input {
			font-size: 2.8vh;
		}
		
		.mb {
			margin-bottom: 2vh;
		}
		
		.option {
			padding-left: 5vw;
			line-height: 5vh;
			margin-bottom: 1vh;
		}
	}
	.answerbox {
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 1vh 5vw;
		margin: 2vh auto;
		font-size: 2.5vh;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		.trueanswer {
			margin-bottom: 1vh;
			text {
				color: rgba(0, 128, 0, .5);
			}
		}
		
		.myanswer {
			text {
				color: rgba(128, 0, 0, .5);
			}
		}
	}
	.spcss {
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		.trueanswer {
			margin-bottom: 0;
		}
	}
	.analysisbox {
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		margin: 2vh auto;
		font-size: 2.5vh;
		padding: 1vh 3vw;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		view {
			margin-bottom: 1vh;
			font-weight: bold;
		}
	}
	.dolist {
		display: flex;
		width: 94vw;
		background-color: #f8f8f8;
		justify-content: space-evenly;
		align-items: center;
		height: 6.5vh;
		margin: 2vh auto;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
	}
	.btnbox {
		display: flex;
		width: 94vw;
		margin: 2vh auto;
		button {
			width: 40vw;
		}
	}
	.cover {
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(238, 238, 238, .9);
		
		.popbox {
			position: absolute;
			max-width: 74vw;
			max-height: 70vh;
			// overflow-y: ;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%);
			z-index: 10;
			background-color: #f8f8f8;
			padding: 2vh;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 10px;
			
			button {
				margin-top: 1vh;
			}
		}
	}
</style>
